<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
    <van-tabbar
      route
      active-color="var(--text-yellow)"
      inactive-color="var(--text-black)"
      class="z-index"
    >
      <van-tabbar-item replace to="/bookshelf" icon="qr">书架</van-tabbar-item>
      <van-tabbar-item replace to="/home" icon="wap-home-o"
        >书城</van-tabbar-item
      >
      <van-tabbar-item replace to="/class" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item replace to="/mine" icon="contact">我的</van-tabbar-item>
    </van-tabbar>
    <div class="img-box" :style="{backgroundImage:`url(${require('@/../public/images/app/1676876469917.png')})`}"></div>
  </div>
</template>
<script>
import {mapMutations} from "vuex"
export default {
  data: () => {
    return {};
  },
  methods:{
    ...mapMutations('read',['setReadHistory'])
  },
  created(){
    let readHistory = JSON.parse(localStorage.getItem("readHistory"))||[];
    this.setReadHistory({readHistory});
  }
};
</script>
<style lang="scss" scoped>
#app{
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  &::-webkit-scrollbar{
    display: none;
  }
  .img-box{
    position: fixed;
    right: 0.1rem;
    bottom: 0.65rem;
    width: 0.74rem;
    height: 0.65rem;
    z-index: 1000;
  }
  .z-index{
    z-index: 1000;
  }
}
</style>
